<template>
	<view class="home">
		<view class="padding-tb-20 padding-lr-30 ">
			<view class="flex align-center">
				<view class="lineactive"></view>
				<view class="flex-one border-bottom-ed"></view>
				<view class="line"></view>
				<view class="flex-one border-bottom-ed"></view>
			</view>
			<view class="flex align-center margin-top-10">
				<view class="flex-one text-32 text-bold">01选择门店</view>
				<view class="flex-one text-28 text-66">02填写联系电话</view>
			</view>
		</view>
		<view class="margin-top-20 margin-lr-30">
			<view class="bg-ff radius-40 padding-20 flex margin-bottom-40 bg-shadow" v-for="(item,index) in list"
				:key="index">
				<image :src="item.image" mode="" class="listimg"></image>
				<view class="flex-one margin-left-30">
					<view class="text-32">{{item.name}}</view>
					<view class="flex align-center margin-top-10">
						<image src="/static/board/phone.png" mode="" class="phoneimg"></image>
						<view class="text-28 text-66 margin-left-10">{{item.tel}}</view>
					</view>
					<view class="flex align-center margin-top-10 ">
						<image src="/static/board/adres.png" mode="" class="phoneimg"></image>
						<view class="text-28 text-66 text-cut-one margin-left-10 flex-one">{{item.address}}</view>
					</view>
					<view class="flex justify-between align-center margin-top-40">
						<view class="jlbtn text-cut-one">离你{{item.distance}}</view>
						<view class="listbtn"
							@click="go('/pages/board/storebm?id='+id+'&shopid='+item.id+'&address='+item.address+'&name='+item.name+'&distance='+item.distance +'&tel='+item.tel+'&time_range='+item.id)">
							立即预约
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				package: 1,
				loadStatus: '',
				city: '',
				id: "", //活动id
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			var that = this
			if (uni.getStorageSync('city')) {
				that.city = uni.getStorageSync('city')
				that.city_id = uni.getStorageSync('city_id')
				that.loadList(1)
			} else {
				//获取位置
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						uni.setStorageSync('lat', res.latitude)
						uni.setStorageSync('lng', res.longitude)
						that.loadList(1)
					},
					fail: function(res) {
						console.log(res, '失败');
					}
				})
			}
		},
		methods: {
			loadList(isFirstPage) {
				var that = this
				that.rq.getList('shop/shop_list', {
					latitude: uni.getStorageSync('lat'),
					longitude: uni.getStorageSync('lng'),
					city_id: uni.getStorageSync('city_id')
				}, {
					that: that,
					first_page: isFirstPage
				})
			}
		},
		onReachBottom() {
			this.loadList(0)
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
	}

	.lineactive {
		width: 20rpx;
		height: 20rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 6rpx solid #000000;
		border-radius: 50%;
	}

	.line {
		width: 20rpx;
		height: 20rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 6rpx solid #d9d9d9;
		border-radius: 50%;
	}

	.listimg {
		width: 226rpx;
		height: 226rpx;
		border-radius: 40rpx;
	}

	.phoneimg {
		width: 28rpx;
		height: 28rpx;
	}

	.jlbtn {
		max-width: 50%;
		font-size: 24rpx;
		color: #999999;
		line-height: 50rpx;
		height: 50rpx;
		padding: 0 15rpx;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #999999;
	}

	.listbtn {
		width: 174rpx;
		height: 60rpx;
		background: #101010;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}
</style>